<template>
  <div class="warn">
    <van-tabs v-model:active="active" @change="onchange">
      <van-tab v-for="item in tabList" :title="item.label" :key="item.value"> </van-tab>
    </van-tabs>
    <div class="warn_msg">
      <List :request="_request" ref="listRef">
        <template #item="{ data }">
          <div class="warn_msg_item" @click="onShow(data)">
            <div class="warn_msg_info">{{ showInfo || '-' }}</div>
            <div class="warn_msg_content">
              <div class="msg">{{ showMsg(data) }}产出报告</div>
              <div class="date">{{ data[showField] || '-' }}</div>
            </div>
            <div class="warn_msg_icon">
              <van-icon name="arrow" />
            </div>
          </div>
        </template>
      </List>
    </div>
  </div>

  <van-dialog v-model:show="show" title="报告">
    <pdfView :src="pdfSrc" />
  </van-dialog>
</template>

<script setup lang="ts">
import router from '@/router'
import { computed, ref } from 'vue'
import pdfView from '@/components/pdfView/index.vue'
import List from '@/components/list/index.vue'
import { showToast } from 'vant'
import {
  earthquakeList,
  projectQuickReportList,
  areaEvent,
  pointEvent,
  downloadGenerateById,
} from '@/api/output'
const active = ref(0)
const tabList = [
  {
    label: '地震预警产出',
    value: 0,
  },
  {
    label: '地震产出',
    value: 1,
  },
  {
    label: '强震区域产出',
    value: 2,
  },
  {
    label: '强震测点产出',
    value: 3,
  },
]
const pdfSrc = ref('')
const infoList = ['预警产出', '地震产出', '区域产出', '测点产出']
const fieldList = ['earthquakeStartTime', 'earthquakeStartTime', 'startTime', 'startTime']
const showInfo = computed(() => {
  return infoList[active.value]
})

const showField = computed(() => {
  return fieldList[active.value]
})
const showMsg = (data) => {
  if ([0, 1].includes(active.value)) {
    return data.projectVO?.projectName
  }
  return data.areaName || data.stationId
}
const _request = async (params: any) => {
  switch (active.value) {
    case 0:
      return await earthquakeList(params)
    case 1:
      return await projectQuickReportList(params)
    case 2:
      return await areaEvent(params)
    case 3:
      return await pointEvent(params)
    default:
      return await earthquakeList(params)
  }
}

const listRef = ref()
const onchange = () => {
  listRef.value.refresh()
}
const show = ref(false)
const onShow = async ({ generateId }) => {
  if (!generateId) {
    return showToast({
      message: '暂未生成报告!',
      position: 'top',
    })
  }
  const result = await downloadGenerateById(generateId)
  const blob = new Blob([result], { type: 'application/pdf' })
  pdfSrc.value = URL.createObjectURL(blob)
  show.value = true
}
</script>

<style lang="scss" scoped>
@mixin getStyle($size, $color, $margin) {
  font-size: $size;
  color: $color;
  margin-bottom: $margin;
}
.msg {
  font-weight: 700;
  @include getStyle(32px, #252628, 14px);
  width: 400px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.date {
  @include getStyle(28px, #5b5c5c, 0);
}
.warn {
  background: #f5f5f5;
  min-height: 100%;
  &_msg {
    padding: 30px 30px 100px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    &_item {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25px 30px;
      border-radius: 12px;
      background-color: #fff;
      margin-bottom: 30px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    &_info {
      @include getStyle(32px, #5f777b, 0);
      font-weight: 700;
      width: 90px;
      height: fit-content;
      padding-right: 24px;
      border-right: 1px solid #a3a3a3;
    }
    &_content {
      flex: 1;
      padding-left: 24px;
    }
  }
}
</style>
